<template>
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="记录编号" prop="recordCode">
                        <el-input v-model="form.recordCode" placeholder="请输入记录编号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商品" prop="goodsId">
                        <el-select v-model="form.goodsId" placeholder="请选择商品">
                            <el-option v-for="item in goodsOptions" :key="item.id" :label="item.goodsName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="记录类型" prop="recordType">
                        <el-select v-model="form.recordType" placeholder="请选择记录类型">
                            <el-option v-for="dict in dict.type.stock_record_type" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="记录日期" prop="recordDate">
                        <el-date-picker v-model="form.recordDate" type="datetime" placeholder="选择记录日期" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="数量" prop="quantity">
                        <el-input-number v-model="form.quantity" :min="0" :precision="2" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="单价" prop="unitPrice">
                        <el-input-number v-model="form.unitPrice" :min="0" :precision="2" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="供应商" prop="supplierId">
                        <el-select v-model="form.supplierId" placeholder="请选择供应商">
                            <el-option v-for="item in supplierOptions" :key="item.id" :label="item.supplierName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="仓库" prop="warehouseId">
                        <el-select v-model="form.warehouseId" placeholder="请选择仓库">
                            <el-option v-for="item in warehouseOptions" :key="item.id" :label="item.warehouseName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="批次号" prop="batchNumber">
                        <el-input v-model="form.batchNumber" placeholder="请输入批次号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="有效期" prop="expiryDate">
                        <el-date-picker v-model="form.expiryDate" type="date" placeholder="选择有效期" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { listGoods } from "@/api/system/goods";
import { listSupplier } from "@/api/system/supplier";
import { listWarehouse } from "@/api/system/warehouse";

export default {
    name: "RecordDetail",
    dicts: ['stock_record_type'],
    props: {
        // 是否显示弹出层
        open: {
            type: Boolean,
            default: false
        },
        // 弹出层标题
        title: {
            type: String,
            default: ""
        },
        // 表单参数
        form: {
            type: Object,
            default: () => {
                return {
                    id: null,
                    recordCode: null,
                    goodsId: null,
                    recordType: null,
                    recordDate: null,
                    quantity: null,
                    unitPrice: null,
                    supplierId: null,
                    warehouseId: null,
                    batchNumber: null,
                    expiryDate: null,
                    remark: null
                };
            }
        }
    },
    data() {
        return {
            // 表单校验
            rules: {
                recordCode: [
                    { required: true, message: "记录编号不能为空", trigger: "blur" }
                ],
                goodsId: [
                    { required: true, message: "商品不能为空", trigger: "change" }
                ],
                recordType: [
                    { required: true, message: "记录类型不能为空", trigger: "change" }
                ],
                recordDate: [
                    { required: true, message: "记录日期不能为空", trigger: "change" }
                ],
                quantity: [
                    { required: true, message: "数量不能为空", trigger: "blur" }
                ],
                unitPrice: [
                    { required: true, message: "单价不能为空", trigger: "blur" }
                ],
                warehouseId: [
                    { required: true, message: "仓库不能为空", trigger: "change" }
                ]
            },
            // 商品选项
            goodsOptions: [],
            // 供应商选项
            supplierOptions: [],
            // 仓库选项
            warehouseOptions: []
        };
    },
    created() {
        this.getGoodsOptions();
        this.getSupplierOptions();
        this.getWarehouseOptions();
    },
    methods: {
        /** 查询商品选项 */
        getGoodsOptions() {
            listGoods().then(response => {
                this.goodsOptions = response.rows;
            });
        },
        /** 查询供应商选项 */
        getSupplierOptions() {
            listSupplier().then(response => {
                this.supplierOptions = response.rows;
            });
        },
        /** 查询仓库选项 */
        getWarehouseOptions() {
            listWarehouse().then(response => {
                this.warehouseOptions = response.rows;
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.$emit('submit', this.form);
                }
            });
        },
        /** 取消按钮 */
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>

<style lang="scss" scoped>
.record-detail {
    .el-form-item {
        margin-bottom: 20px;
    }
}
</style>